{extends file="../global.html"}
{block name=body}

 
{if $error}
  <p style="color:red">{$error}</p>
{else}

{/if}
<form class="layui-form"  method="post" enctype="multipart/form-data">
  <div class="layui-form-item">
    <label class="layui-form-label">品牌名称</label>
    <div class="layui-input-block">
      <input type="text" name="type_name" required id="test" lay-verify="required" placeholder="请输入分类名" autocomplete="off" class="layui-input typename"><span id="span"></span>
    </div>
  </div>
  <div class="layui-form-item">
   <label class="layui-form-label">品牌图片</label>

  <input type="file" name="file" id="imgPicker">
  <img id="preview" width="100"/>
  </div>
  
  <!-- <input type="hidden" name="" value="" class=""> -->
<input type="hidden" name="type_pinyin"/>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" id="btn" lay-submit lay-filter="formDemo" >立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<label><input type="radio" name="pinyin_type" value="1"/ checked style="display: none;"></label>
<div id="result"></div>
  <script type="text/javascript">
  function getPinyin()
  {
    var value = document.getElementById('test').value;
    var type = document.querySelector('[name="pinyin_type"]:checked').value;
    var pinyin = document.querySelector('[name="type_pinyin"]').checked;
    var result = '';
    if(value)
    {
      switch(type)
      {
        case '1': result = pinyinUtil.getPinyin(value, '', false, pinyin); break;
        
      }
    }
    $('#test').blur(function(){
      $.trim($('input[type="hidden"]').val(result));
    })
  }
  document.getElementById('test').addEventListener('input', getPinyin);
  document.addEventListener('change', function(e)
  {
    if(e.target.name === 'pinyin_type')
    {
      getPinyin();
    }
  });
  getPinyin();
  // 初始化简单的拼音输入法
  // SimpleInputMethod.init('.test-input-method');

  </script>




<script>
$(document).ready(function() {
        var picname = $('input[type="file"]')
        var picval = $('input[type="file"]').val();
        if(picval == ''){
          $('#btn').addClass('layui-btn-disabled');
              $('#btn').attr('onclick','return false');
            }

        picname.change(function(){
          if($(this).val()){
               $('#btn').removeClass('layui-btn-disabled');
              $('#btn').attr('onclick','return true');
          }
        })
            
             
          
        // alert(picname);
      var name = $(".typename");
        // res = false;
      name.blur(function(){

       var name_val=name.val();
        if (name_val == "") {
          document.getElementById("span").innerHTML = "<p>品牌不能为空</p>";
          return;
        }
        $.ajax({
          type:"post",
          data:{ type_name:name_val},
          url:"{url('run/type/ajaxSelect')}",
          success:function(msg){
      
            if(msg==true){
              document.getElementById("span").innerHTML = "<font color='red'>品牌已存在</font>";
              $('#btn').addClass('layui-btn-disabled');
              $('#btn').attr('onclick','return false');
            }
            else{
              document.getElementById("span").innerHTML = "<font color='green'>品牌可以使用</font>";
              $('#btn').removeClass('layui-btn-disabled');
              $('#btn').attr('onclick','return true');
            }
          },
          error:function(msg){

            console.log(msg);

             

          }

        })
      })
 });
   
pic();


</script>



{/block}